<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, UploadProps, UploadUserFile } from "element-plus";
import { importExaminationURI } from "@/http/Api/teachers/examinationApi";

// 方向
const subjects = reactive([
  {
    id: 1,
    name: "前端",
  },
  {
    id: 2,
    name: "java",
  },
]);

// 搜索
// const searchFormRef = ref<FormInstance>();
// const searchCondition = reactive({
//   level: "",
//   subject: "",
// });
// const onSearchSubmit = () => {
//   console.log("submit!");
//   ElMessage("敬请期待");
// };
// // 搜索重置
// const resetSearchForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.resetFields();
// };

// 新增考题
// const onAddExamination = () => { };

// 导入上传
const examinationFileList = ref<UploadUserFile[]>([]);
const onImportBeforeUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log(" - onImportBeforeUpload - ", rawFile);
};
const onMoreFiles: UploadProps["onExceed"] = (files) => {
  console.log(files);
  if (files.length > 5) {
    ElMessage({
      message: "最多支持上传5个文件！",
      type: "error",
    });
  }
};
const onImportSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile,
  uploadFiles
) => {
  console.log(" - onImportSuccess - ", response, uploadFile, uploadFiles);
  if (response.code === "200") {
    examinationFileList.value = [];

    ElMessage({
      message: "文件上传成功！",
      type: "success",
    });
  } else {
    examinationFileList.value = [];

    ElMessage({
      message: "文件上传失败，请联系管理员！",
      type: "error",
    });
  }
};
const onImportError: UploadProps["onError"] = (
  error,
  uploadFile,
  uploadFiles
) => {
  console.log(" - onImportError - ", error, uploadFile, uploadFiles);
  ElMessage({
    message: "文件上传失败，请联系管理员！",
    type: "error",
  });
};

// 表格部分
const examinationList = reactive([
  // {
  //   name: "浏览器的渲染机制",
  //   subject: "前端",
  //   level: "level1",
  // },
  // {
  //   name: "什么是服务器",
  //   subject: "java",
  //   level: "level2",
  // },
]);

// 分页改变
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>考题管理</p>
      </div>
    </div>
    <div class="page-body">
      <!-- 搜索 -->
      <!-- <div class="search">
        <el-form
          ref="searchFormRef"
          :inline="true"
          :model="searchCondition"
          class="demo-form-inline"
        >
          <el-form-item label="level" prop="level">
            <el-input
              v-model="searchCondition.level"
              style="width: 100px"
              size="small"
            />
          </el-form-item>
          <el-form-item label="方向" prop="subject">
            <el-select
              v-model="searchCondition.subject"
              class="m-2"
              size="small"
              style="width: 100px"
            >
              <el-option
                v-for="item in subjects"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSearchSubmit"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="resetSearchForm(searchFormRef)"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div> -->

      <!-- 导入操作 -->
      <div class="batch-processing">
        <el-upload
          v-model:file-list="examinationFileList"
          class="upload-demo"
          :action="importExaminationURI"
          show-file-list
          name="file"
          multiple
          :limit="5"
          accept=".xls"
          :on-success="onImportSuccess"
          :on-error="onImportError"
          :before-upload="onImportBeforeUpload"
          :on-exceed="onMoreFiles"
        >
          <el-button link>导入考题</el-button>
        </el-upload>
      </div>

      <!-- 列表 -->
      <div class="student-list">
        <el-table :data="examinationList" stripe border style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="55">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="题目" width="160" />
          <el-table-column prop="subject" label="方向" width="90" />
          <el-table-column prop="level" label="level" width="80" />
          <el-table-column label="操作">
            <template #default>
              <el-button link size="small">查看</el-button>
              <el-button link size="small">修改</el-button>
              <el-button link size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="1"
        class="mt-4"
        @current-change="handleCurrentChange"
      />
    </div>
  </main>
</template>

<style lang="scss">
.student-list {
  padding: 20px 0;
}
</style>
